import React, { useEffect } from 'react'
import { Form, Input, Button } from 'antd'

function Input2(props) {
  useEffect(() => {
    console.info(`create new Item ${props.name}`)
    return () => {
      console.info(`Item destory ${props.name}`)
    }
  }, [])
  return <Input {...props} />
}

class ListDemo extends React.Component {
  state = {
    arr: [{
      id: 1,
      value: 'test1'
    }, {
      id: 2,
      value: 'test2'
    }]
  }

  removeArr = (id) => {
    const { arr } = this.state
    const index = arr.findIndex((item) => (item.id === id))
    arr.splice(index, 1)
    this.setState({ arr })
  }

  render() {
    const onFinish = values => {
      console.log('Received values of form: ', values)
    }
    console.info('rerender')
    return (
      <Form onFinish={onFinish}
        initialValues={{
          test: 'aaa',
          list: [{
            test: 'bbb',
            list: [
              { },
              { }
            ]
          }]
        }}
      >
        <Form.Item label="输入框" name="test">
          <Input />
        </Form.Item>
        <Form.List name="list" >
          {(fields, { add, remove }) => (
            <div>
              {fields.map(field => {
                const { key, name, fieldKey } = field

                return (
                  <div key={fieldKey}>
                    <Form.Item label="一级输入框" name={[name, 'test']} fieldKey={[fieldKey, 'test']}>
                      <Input />
                    </Form.Item>
                    <Form.List name={[name, 'list']} >
                      {(fields, { add, remove }) => {
                        console.info(fields)
                        return (
                          <>
                            {fields.map(field => {
                              const { key, name, fieldKey, ...rest } = field
                              return (
                                <div key={key}>
                                  <Form.Item {...rest} label="二级输入框" name={[name, 'test']}>
                                    <Form.Item label="哈哈哈" name={[name, 'test', 'test2']}>
                                      <Input2 name={fieldKey} />
                                    </Form.Item>
                                    <div>aa</div>
                                    {/* <Form.Item label="哈哈哈" name={[name, 'test', 'test3']}>
                                      <Input2 name={fieldKey} />
                                    </Form.Item> */}
                                  </Form.Item>
                                  <Button onClick={() => remove(name)} >删除2</Button>
                                </div>
                              )
                            })}

                            <Button onClick={() => add()} >添加2</Button>
                          </>
                        )
                      }}
                    </Form.List>
                  </div>
                )
              })}
              <Button onClick={() => add()} >添加</Button>
            </div>
          )}
        </Form.List>
        {
          this.state.arr.map((item) => {
            return (
              <div key={item.id}>
                <Input2 name={item.id} />
                <Button onClick={() => this.removeArr(item.id)} >删除</Button>
              </div>)
          })
        }
        <Button type="primary" htmlType="submit">Submit</Button>
      </Form>
    )
  }
}
export default ListDemo
